<script setup>
import { useAuthStore } from '@/stores'

const authStore = useAuthStore()

const emit = defineEmits(['update:modelValue'])
function toOtherForm(type) {
  emit('update:modelValue', type)
}

const rules = computed(() => {
  return {
    username: [
      {
        required: true,
        validator(_, value) {
          if (!value) {
            return new Error('请输入用户名')
          } else if (!/^[\w-]{4,16}$/.test(value)) {
            return new Error('用户名应由字母与数字组成, 长度应为4-16位, 且不能带有 _ - 外的符号')
          }
          return true
        },
        trigger: ['input', 'blur']
      }
    ],
    password: {
      required: true,
      trigger: 'blur',
      message: '请输入密码'
    }
  }
})
const formValue = ref({
  username: null,
  password: null
})
const isRemember = ref(false)

const formRef = ref(null)
function handleLogin() {
  formRef.value?.validate(async (errors) => {
    if (errors) return window.$message.error(errors)
    const { username, password } = formValue.value
    const res = await authStore.login({
      username: username,
      password: password
    })
    if (res) window.$message.error(res)
  })
}
function areFieldsValid() {
  return formValue.value.username !== null && formValue.value.password !== null && formValue.value.username.trim() !== '' && formValue.value.password.trim() !== ''
}
function otherLoginway(way) {
  window.$message.info(`${way}登录方式尚不支持，如有需要请联系管理员`)
}
</script>

<template>
  <div>
    <n-h2 depth="3" class="text-center">输入账号</n-h2>
    <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
      <n-form-item path="username">
        <n-input v-model:value="formValue.username" clearable placeholder="请输入用户名" />
      </n-form-item>
      <n-form-item path="password">
        <n-input v-model:value="formValue.password" type="password" placeholder="输入密码" clearable show-password-on="click" @keydown.enter="handleLogin">
          <template #password-invisible-icon>
            <icon-park-outline-preview-close-one />
          </template>
          <template #password-visible-icon>
            <icon-park-outline-preview-open />
          </template>
        </n-input>
      </n-form-item>
      <n-space vertical :size="20">
        <div class="flex-y-center justify-between">
          <n-checkbox v-model:checked="isRemember">记住我</n-checkbox>
          <n-button type="primary" text @click="toOtherForm('resetPwd')">忘记密码？</n-button>
        </div>
        <n-button block type="primary" size="large" :disabled="!areFieldsValid()" @click="handleLogin">登录</n-button>
        <n-flex>
          <n-text>你没有账户？</n-text>
          <n-button type="primary" text @click="toOtherForm('register')">注册</n-button>
        </n-flex>
      </n-space>
    </n-form>
    <n-divider style="margin-top: 40px; margin-bottom: 40px">
      <span op-80>其他</span>
    </n-divider>
    <n-space justify="center">
      <n-button circle @click="otherLoginway('微信')">
        <template #icon>
          <n-icon><icon-park-outline-wechat /></n-icon>
        </template>
      </n-button>
      <n-button circle @click="otherLoginway('QQ')">
        <template #icon>
          <n-icon><icon-park-outline-tencent-qq /></n-icon>
        </template>
      </n-button>
      <n-button circle @click="otherLoginway('Github')">
        <template #icon>
          <n-icon><icon-park-outline-github-one /></n-icon>
        </template>
      </n-button>
    </n-space>
  </div>
</template>
